<template>
  <div>
    <library
      :visiblity="visiblity"
      title="图片库"
      :data="listData"
      :typeList="picTypeList"
      @close="close"
      @click-left="clickLeft"
      @click-top="clickTop"
      @selected="selected"
    >
      <el-pagination
        style="display:inline-block;"
        background
        layout="prev, pager, next"
        :page-count="10"
        @current-change="currentChange"
      ></el-pagination>
      <el-button type="primary" class="btn">确 定</el-button>
      <el-button class="btn" @click="close">取 消</el-button>
    </library>
  </div>
</template>

<script>
import library from '@/pages/common/library';
export default {
    components: {
        library,
    },
    props: {
        visiblity: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            picTypeList: [
                {
                    label: '通用图片',
                    key: '0',
                    children: [
                        { type: '炫酷', key: 1 },
                        { type: '红火', key: 2 },
                        { type: '科技', key: 3 },
                        { type: '天气', key: 4 },
                    ],
                },
                {
                    label: '背景图片',
                    key: '1',
                    children: [
                        { type: '炫酷1', key: 1 },
                        { type: '红火1', key: 2 },
                        { type: '科技1', key: 3 },
                        { type: '天气1', key: 4 },
                    ],
                },
                {
                    label: '图标',
                    key: '2',
                    children: [
                        { type: '炫酷2', key: 1 },
                        { type: '红火2', key: 2 },
                        { type: '科技2', key: 3 },
                        { type: '天气2', key: 4 },
                    ],
                },
                {
                    label: '头像',
                    key: '3',
                    children: [
                        { type: '炫酷3', key: 1 },
                        { type: '红火3', key: 2 },
                        { type: '科技3', key: 3 },
                        { type: '天气3', key: 4 },
                    ],
                },
            ],
            listData: [1, 2, 3, 4, 5, 6, 7, 8,11,22,33,44,55,66,77,88,99,12],
        };
    },
    methods: {
        close() {
            this.$emit('close');
        },
        clickLeft(key) {},
        clickTop(leftKey, topKey) {
            console.log(leftKey, topKey);
        },
        // 选中一张图片时触发
        selected(data){
          console.log('data :', data);
        },
        // 页码改变触发
        currentChange(page){
          console.log("当前的页码",page);
        }
    },
};
</script>

<style lang="scss" scoped>
</style>